<template>
  <div class="hi-root-lay">
    <div class="hi-breadcrumb">
      <div style="margin: 0 8px; font-size: 15px;"> > </div>

      <template v-if="pathInfo.length > 1">
        <el-breadcrumb :separator-icon="ArrowRight">
          <template v-for="(item, index) in pathInfo" :key="item.id">
            <el-breadcrumb-item>
              <span @click="clickPath(index)"> {{ item.name }} </span>
            </el-breadcrumb-item>
          </template>
        </el-breadcrumb>
      </template>
    </div>
    <div class="hi-header">
      <div v-if="current" style="color: #484b55; font-size: 18px; font-weight: bold">
        {{ current.name }}
      </div>
    </div>
    <div class="hi-content">
      <TableWidget :pagination="props.pagination" />
    </div>
  </div>
</template>

<script setup lang="ts">

import {computed, effect, ref} from "vue";
import TableWidget from "@/widget/TableWidget.vue";
import {ArrowRight} from "@element-plus/icons-vue";
import {useRoute} from "vue-router";

const route = useRoute();

const breadList = computed(() => {
  return route.matched;
});

interface Pagination {
  current: number,
  pageSize: number,
  total: number,
  sizes?: any,
}

const props = withDefaults(defineProps<{
  loadData?: any,
  title?: string,
  detailLabel?: string,
  columns: any,
  pagination: Pagination,
}>(), {
  columns: [],
});

const current = ref();
const tableBox = ref(null);

const loadCurrent = () => {
  if (props.loadData) {
    props.loadData({
      id: current.value.id,
      current: props.pagination.current,
      pageSize: props.pagination.pageSize,
    });
  }
}

effect(() => {
  current.value = {
    id: '', name: props.title
  };
  loadCurrent();
})

const pathInfo = ref([]);

const clickPath = (index: any) => {
  current.value = pathInfo.value[index];
  pathInfo.value.splice(index, pathInfo.value.length - index);
  loadCurrent();
}

</script>

<style>
.hi-root-lay {
  display: flex;
  flex-direction: column;
  margin: 8px;
  width: 100%;
  height: 100%;
}

.hi-breadcrumb {
  display: flex;
  flex-direction: row;
  margin-bottom: 8px;
}

.hi-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 16px 0;
}

.hi-content {
  flex: 1;
  overflow: hidden;
}

</style>
